<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="element-ui/css/index.css">
<title>Title</title>
<style type="text/css">
.el-row {
	margin: 20px;
}

.el-col {
	border: 1px solid #e2e2e2;
	border-radius: 4px;
}
textarea {
	width: 99.2%;
	border-radius: 4px;
}
.header {
	min-height: 60px;
}

.bg-purple-dark {
	background: gray;
}

.bg-purple-blue {
	background: #FFF;
}

.content {
	min-height: 450px;
}
</style>
</head>
<body style="text-align: center;">
	<!-- 先引入 Vue -->
	<script src="vue/vue.min.js"></script>
	<!-- 引入组件库 -->
	<script src="element-ui/index.js"></script>
	<div id="app">
		<el-row> 
			<el-col :span="24">
				<div class="header">
					<el-button style="margin-top: 10px;" @click="doClick">test</el-button>
				</div>
			</el-col> 
		</el-row>
		<el-row> 
			<el-col style="border: 0px;" :span="11">
				<div class="content">
					<!--<el-input
						auto-complete="on"
  						type="textarea"
  						:rows="21"
  						placeholder="请输入内容"
  						v-model="html_content"
  						@change="contentChange">
					</el-input>  -->
					
					<textarea rows="30" v-model="html_content" @keypress="contentChange"></textarea>
				</div>
			</el-col>
			<el-col class="space" style="border: 0px;" :span="2">
				<div class="content">
				</div>
			</el-col> 
			<el-col :span="11">
				<div class="content">
					<iframe src="show.html" id="childframe" width="100%" height="450"></iframe>
				</div>
			</el-col>
		</el-row>
	</div>
</body>
<script>
	var tag = {
		t1: 'html',
		t2: 'script',
		t3: 'style'
	}
	
	new Vue({
		el: '#app',
		data: function() {
			return { 
				visible: false,
				html_content: "<!DOCTYPE html>\n<"+tag.t1+">\n" 
						+ "<head>\n<"+tag.t2+"></"+tag.t2+">\n<"+tag.t3+"></"+tag.t3+">\n"
						+ "</head>\n<body>\n\n</body>\n</"+tag.t1+">"
			}
		},
		methods: {
			doClick() {
				var childDOC = document.getElementById("childframe").contentWindow.document;
				childDOC.write(this.html_content);
				childDOC.close();
			},
			contentChange(event) {
				//var ret = pattern.exec(this.html_content)
				if(event.keyCode == 47) {
					var currentNo = event.srcElement.selectionStart;
				//	console.log(1)
					if(this.html_content.substring(currentNo-1, currentNo) == '<') {
						//console.log(2)
						var pattern = /<\/?[a-z]+>/g;
						var b_content = this.html_content.substring(0, currentNo);
						var a_content = this.html_content.substring(currentNo);
						var r1 = b_content.match(pattern);
						var r2 = a_content.match(pattern);
						//console.log(r1)
					//	console.log(r2)
						
						var b_ends = [];
						var b_ends_no = 0;
						var b_ret = "";
						for(var i=r1.length-1;i>=0;i--) {
							if(r1[i].indexOf('/')>=0) {
								b_ends[b_ends_no] = r1[i];
								b_ends_no++;
							} else {
								if(b_ends_no == 0) {
									//匹配到tag左端
									b_ret = r1[i];
									break;
								} else {
									if(b_ends[b_ends_no - 1].replace('/','') === r1[i]) {
										//删除最后一个元素
										b_ends.pop();
										b_ends_no--;
									} else {
										b_ret = r1[i];
										break;
									}
								}
							}
						}
						
						if(b_ret.length > 0) {
							//有结果
							
						}
					}
				}
				
				//var str3 = 'CPU: Intel Core2 5200; Memory: 2G;OS: Ubuntu 9.04'; 
				//var reg3 = /Memory(:\s+.*(?=;OS:))/g; 
				//str3.match(reg3);
				//console.log(reg3.exec(str3)[0]); 
				//console.log(RegExp.$1); //结果是2G
			}
		}
	})
  </script>
</html>